<template>
  <div>
    <div style="color: #bee1fd;text-align: center;font-weight:bolder;">【 服务资源占用比 】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import * as echarts from 'echarts'
// 数据
const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

const target = ref(null)
let mChart = null
// 方法
onMounted(() => {
  mChart = echarts.init(target.value)
  renderChart()
})

const renderChart = () => {
  const options = {
    // X 轴展示选项
    xAxis: {
      type: 'category',
      // 根据根据服务端数据筛选
      data: props.data.servers.map((item) => item.name),
      // 文字色值
      axisLabel: {
        color: '#9EB1C8'
      }
    },
    // Y 轴展示数据
    yAxis: {
      // 数据展示
      type: 'value',
      // 不显示轴
      show: false,
      // 最大值（防止触顶）
      max: function (value) {
        // 取整
        return parseInt(value.max * 1.2)
      }
    },
    // echarts 网格绘制的位置，对应 上、右、下、左
    grid: {
      top: 16,
      right: 0,
      bottom: 26,
      left: -26,
      // 计算边距时，包含标签
      containLabel: true
    },
    // 柱形图核心配置
    series: {
      // 柱形图
      type: 'bar',
      // 数据筛选
      data: props.data.servers.map((item) => ({
        name: item.name,
        value: item.value
      })),
      // 每个轴的样式
      itemStyle: {
        color: '#479AD3', // 设置柱子的颜色
        barBorderRadius: 5, // 设置柱子的圆角
        shadowColor: 'rgba(0, 0, 0, 0.3)', // 设置柱子的阴影颜色
        shadowBlur: 5 // 设置柱子的阴影模糊大小
      },
      // 柱子宽度
      barWidth: 12,
      // 文本
      label: {
        show: true,
        // 设置标签位置为右侧
        position: 'top',
        textStyle: {
          // 设置标签文本颜色
          color: '#fff'
        },
        formatter: '{c}%'
      }
    }
  }


  // -----------------负荷双条曲线----------------
  //   const options = {
  //   title: {
  //     // text: 'Stacked Line'
  //   },
  //   tooltip: {
  //     trigger: 'axis'
  //   },
  //   legend: {
  //     data: ['今日负荷曲线', '昨日负荷曲线'],
  //     textStyle: {
  //       color: '#FFF' // 设置标题的字体颜色
  //     }
  //   },
  //   grid: {
  //     left: '3%',
  //     right: '4%',
  //     bottom: '3%',
  //     containLabel: true
  //   },
  //   toolbox: {
  //     feature: {
  //       saveAsImage: {}
  //     }
  //   },

  //   xAxis: {
  //     type: 'category',
  //     data: ['0小时', '4小时', '6小时', '8小时', '10小时', '12小时', '14小时']
  //   },
  //   yAxis: {
  //     type: 'value',
  //     name: '单位：MW',
  //     splitLine: {
  //       show: false // 隐藏横向的白色条线
  //     }
  //   },
  //   series: [
  //     {
  //       name: '今日负荷曲线',
  //       data: [20, 30, 20, 25, 20, 25, 20],
  //       type: 'line',
  //       smooth: true,
  //       lineStyle: {
  //         width: 4
  //         // color: '#FF5733' // 设置今日负荷曲线颜色
  //       },
  //       symbol: 'circle', // 设置折点形状
  //       symbolSize: 10 // 设置折点大小
  //     },
  //     {
  //       name: '昨日负荷曲线',
  //       data: [35, 25, 30, 35, 30, 35, 30],
  //       type: 'line',
  //       smooth: true,
  //       lineStyle: {
  //         width: 4
  //         // color: '#FF5733' // 设置今日负荷曲线颜色
  //       },
  //       symbol: 'circle', // 设置折点形状
  //       symbolSize: 10 // 设置折点大小
  //     }
  //   ]
  // };



  mChart.setOption(options)
}

// 监听数据的变化，重新渲染图表
watch(
  () => props.data,
  () => {
    renderChart()
  }
)
</script>

<style lang="scss" scoped></style>
